<template>
  <span :class="className">{{tag.tagName}}</span>
</template>

<script>
export default {
  props:{
    tag:{
      type:Object,
      default:function(){
        return {
          selfTagId:0,
          tagName:'',
        }
      }
    }
  },
  computed: {
    className:function(){
      let tagName = this.tag.tagName;
      let tagClass = {
        tag:true,
        "tag-gary":RegExp('介绍').test(tagName),
        "tag-yellow":RegExp('关注').test(tagName),
        "tag-purple":RegExp('咨询').test(tagName),
        "tag-red":RegExp('意向').test(tagName),
      };
      return tagClass;
    },
  },
  data(){
    return {}
  },
}
</script>

<style lang="less" scoped>
@import url('./../assets\config.less');
.tag{
  display: inline-block;
  height: 20px;
  padding: 0 5px;
  line-height: 19px;
  font-size: 12px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
  &.tag-gary{
    color: @gary;
    background-color: lighten(@gary,40%);
    border-color: lighten(@gary,20%);
  }
  &.tag-blue{
    color: @blue;
    background-color: lighten(@blue,40%);
    border-color: lighten(@blue,20%);
  }
  &.tag-yellow{
    color: @yellow;
    background-color: lighten(@yellow,35%);
    border-color: lighten(@yellow,20%);
  }
  &.tag-purple{
    color: @purple;
    background-color: lighten(@purple,20%);
    border-color: lighten(@purple,20%);
  }
  &.tag-red{
    color: @red;
    background-color: lighten(@red,35%);
    border-color: lighten(@red,20%);
  }
}


</style>